<template>
  <div class="map-container"
       ref="map">
    <el-row>
      <track-skew v-show="show2D"
                  ref="map2D"
                  :height="height"
                  :show2D="show2D"
                  :width="width"
                  :tag-info="tagInfo"
                  :tag-position="tagPosition"
                  :warning-info="warningInfo"
                  :tabs-info="tabsInfo"></track-skew>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TrackSkew from '@/components/Track/TrackSkew'
// import resize from './mixins/resize'

import { isEqual } from '@/utils'
import { getTagPositionTrack } from '@/api/map'

export default {
  name: 'Map',
  // mixins: [resize],

  data() {
    return {
      width: '100%',
      height: 'calc(100vh - 106px)',
      show3D: false,
      show2D: true,
      tabsInfo: {
        activeCollapseName: ['1'],
        activeName: 'error',
        PositionTS: '',
        params_track: {
          beginPositionTS: null,
          endPositionTS: null,
          tagId: null
        },
        showTrack: false,
        trackCreated: false,
        time: null,
        isSliderActive: false,
        positionTracks: null,
        positionTimes: null,
        confirmLoading: false,
        picker_disabled: false,
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一小时',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        }
      },
      tagInfo: null,
      tagPosition: [],
      warningInfo: null
    }
  },
  methods: {
    handleTrackRemove() {
      this.tabsInfo.isSliderActive = false
      this.tabsInfo.PositionTS = null
      this.tabsInfo.showTrack = false
      this.tabsInfo.picker_disabled = false
      this.tabsInfo.activeCollapseName = ['']
      // this.tabsInfo.positionTracks=[]
      // this.tabsInfo.positionTimes=[]
      // this.$refs.map3D.removeTrackAnimation()
    },
    getPositionTrack() {
      this.tabsInfo.showTrack = false
      this.tabsInfo.confirmLoading = true
      this.tabsInfo.params_track.beginPositionTS = this.tabsInfo.PositionTS[0]
      this.tabsInfo.params_track.endPositionTS = this.tabsInfo.PositionTS[1]
      this.tabsInfo.params_track.tagId = this.tabsInfo.activeName
      getTagPositionTrack(this.tabsInfo.params_track).then(
        r => {
          console.log(r)
          this.tabsInfo.time = r.timestamp[0]
          console.log(this.tabsInfo.time)
          // let j = r.length >= 10000 ? Math.floor(r.length / 10000) : 1
          this.tabsInfo.positionTracks = r.position
          this.tabsInfo.positionTimes = r.timestamp
          // this.$set()
          console.log(this.tabsInfo.positionTimes.length)
          this.tabsInfo.confirmLoading = false
          this.tabsInfo.isSliderActive = true
        },
        e => {
          this.tabsInfo.confirmLoading = false
          console.log(e)
          console.log('fail')
        }
      )
    },
    handle2D() {
      // listCurrentTags().then(r => {
      //   this.tagInfo = r.tags
      //   this.$nextTick(() => {
      //     for (let i in r.tags) {
      //       this.tagPosition.push({
      //         name: r.tags[i].id,
      //         position: r.tags[i].smoothedPosition.slice(0, 2)
      //       })
      //     }
      //   })
      // })
      this.show3D = false
      this.show2D = true
      console.log(this.$refs.map2D)
      this.$nextTick(() => {
        this.$refs.map2D.$_resizeHandler()
      })
    }
  },
  created() {
    this.tagInfo = [
      {
        tagId: 'e7979e64a05c',
        userName: '人员1',
        color: '#FFBF00',
        userPost: '访客',
        id: 7,
        timeOutLoading: 0
      }
    ]
    setTimeout(() => {
      this.tagInfo.push({
        tagId: 'd948455dba4f',
        userName: '人员2',
        color: '#FFBF00',
        userPost: '访客',
        id: 2,
        timeOutLoading: 0
      })
    }, 500)
    for (let i in this.tagInfo) {
      this.tagPosition.push({
        name: this.tagInfo[i].tagId,
        position: [0, 0]
      })
    }
  },
  mounted() {
    // setTimeout(()=>{
    //   this.warningInfo={id:'d948455dba4f',userName:'访客01',status:1,area:'234'}
    //         console.log(this.warningInfo)
    // },3000)
    // setTimeout(()=>{
    //   this.warningInfo={id:'c6f39ab751b8',status:2,area:'234'}
    //         console.log(this.warningInfo)
    // },4000)
    // setTimeout(()=>{
    //   this.warningInfo={id:'d948455dba4f',status:3,area:'234'}
    //         console.log(this.warningInfo)
    // },6000)
    // setTimeout(()=>{
    //   this.warningInfo={id:'d948455dba4f',status:2,area:'234'}
    //         console.log(this.warningInfo)
    // },12000)
    // setTimeout(()=>{
    //   this.warningInfo={id:'d948455dba4f',status:3,area:'234'}
    //         console.log(this.warningInfo)
    // },18000)
    // setTimeout(()=>{
    //   this.warningInfo={id:'d948455dba4f',status:2,area:'234'}
    //         console.log(this.warningInfo)
    // },21000)
    // console.log(process.env.VUE_APP_BASE_API.substr(7))
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 6)
      this.$set(this.tagPosition[0].position, 1, 7)
    }, 1000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 7)
      this.$set(this.tagPosition[0].position, 1, 7)
    }, 2000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 8)
      this.$set(this.tagPosition[0].position, 1, 7)
    }, 3000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 9)
      this.$set(this.tagPosition[0].position, 1, 7)
    }, 4000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 10)
      this.$set(this.tagPosition[0].position, 1, 7)
    }, 5000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 10)
      this.$set(this.tagPosition[0].position, 1, 6)
    }, 6000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 10)
      this.$set(this.tagPosition[0].position, 1, 5)
    }, 7000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 10)
      this.$set(this.tagPosition[0].position, 1, 4)
    }, 8000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 9)
      this.$set(this.tagPosition[0].position, 1, 4)
      this.warningInfo = {
        id: 'e7979e64a05c',
        name: '人员1',
        status: 4,
        area: '234'
      }
    }, 9000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 9)
      this.$set(this.tagPosition[0].position, 1, 4)
    }, 9001)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 9)
      this.$set(this.tagPosition[0].position, 1, 4)
    }, 11000)
    setTimeout(() => {
      this.$set(this.tagPosition[0].position, 0, 9)
      this.$set(this.tagPosition[0].position, 1, 4)
    }, 12000)
    // setTimeout(() => {
    //   this.$set(this.tagPosition[0].position, 0, 10)
    //   this.$set(this.tagPosition[0].position, 1, 4)
    // }, 10000)
    // setTimeout(() => {
    //   this.$set(this.tagPosition[0].position, 0, 22)
    //   this.$set(this.tagPosition[0].position, 1, 13)
    // }, 11000)
    // setTimeout(() => {
    //   this.$set(this.tagPosition[0].position, 0, 22)
    //   this.$set(this.tagPosition[0].position, 1, 13)
    // }, 12000)
    // setTimeout(() => {
    //   this.$set(this.tagPosition[0].position, 0, 22)
    //   this.$set(this.tagPosition[0].position, 1, 13)
    // }, 13000)
    // setTimeout(() => {
    //   this.$set(this.tagPosition[0].position, 0, 22)
    //   this.$set(this.tagPosition[0].position, 1, 13)
    // }, 14000)
    // setTimeout(() => {
    //   this.$set(this.tagPosition[0].position, 0, 22)
    //   this.$set(this.tagPosition[0].position, 1, 13)
    // }, 15000)
  },
  watch: {
    warningInfo: function(val, oldVal) {
      console.log(this.warningInfo)
      if (!isEqual(val, oldVal)) {
        if (this.warningInfo.status === 0) {
          this.$notify({
            title: '警报解除',
            message: this.warningInfo.name + '回到了' + this.warningInfo.area,
            type: 'success',
            duration: 5000
          })
          // this.activeName = this.warningInfo.name
          // this.warningInfo.splice(i, i)
        } else if (this.warningInfo.status === 1) {
          this.$notify({
            title: '警报',
            message: this.warningInfo.name + '进入了' + this.warningInfo.area,
            type: 'warning',
            duration: 5000
          })

          let url =
            'http://111.229.7.173:8000/api/v1.0/service/location?content=' +
            this.warningInfo.name +
            '您已非法闯入库房请退出'
          this.$jsonp(url).then(e => {
            console.log(e)
          })

          // this.activeName = this.warningInfo.name
          // this.warningInfo.splice(i, i)
        } else if (this.warningInfo.status === 2) {
          this.$notify({
            title: 'SOS',
            message: this.warningInfo.name + '按键求救',
            type: 'error',
            duration: 5000
          })
          // this.activeName = this.warningInfo.name
        } else if (this.warningInfo.status === 3) {
          this.$notify({
            title: 'SOS解除',
            message: this.warningInfo.name + '取消请求',
            type: 'success',
            duration: 5000
          })
          // this.activeName = this.warningInfo.name
        } else if (this.warningInfo.status === 4) {
          this.$notify({
            title: '警报',
            message: this.warningInfo.name + '偏离了预定轨迹',
            type: 'warning',
            // iconClass: 'icon-trackSkew',
            customClass: 'skew',
            duration: 50000
          })
          // this.activeName = this.warningInfo.name
        }
      }
    }
  },
  components: { TrackSkew },
  // components: { MapThree },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>
<style>
.skew {
  background: rgb(245, 229, 4) !important;
  /* background: rgb(233, 10, 10) !important; */
  /* color:black; */
}
.el-notification__content {
  color: black;
}
</style>
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
@import '~@/styles/variables.scss';
.map-container {
  position: relative;
  width: '100%';
  height: '100%';
  // height: calc(100vh +150px);
}
.btn1 {
  position: fixed;
  bottom: 40px;
  right: 30px;
  // z-index: -1;
  // right:calc(100% - #{$sideBarWidth});
  // left: calc(100% - #{$sideBarWidth});
}
.btn2 {
  font-size: 35px;
}
.showTrack {
  margin: 5px, 20px;
}
.notify {
  background: #ff0000 !important;
}
</style>
